<template>
    <cardComponent class="accountBalance" pageTitle="设备卡状态变更历史查询">
        <template slot="cardBody">
            <el-form
                class="searchForm"
                ref="searchForm"
                :model="searchForm"
                :inline="true"
                size="small"
                label-width="80px"
            >
                <el-form-item label="卡号:" label-position="left">
                    <el-input v-model="searchForm.mainCardNo"></el-input>
                </el-form-item>
                <el-form-item label="起始日期:" label-position="left">
                    <el-date-picker
                        v-model="searchForm.startDate"
                        type="date"
                        placeholder="请选择起始日期"
                        format="yyyy-MM-dd"
                        value-format="yyyyMMdd"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期:" label-position="left">
                    <el-date-picker
                        v-model="searchForm.endDate"
                        type="date"
                        placeholder="请选择结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyyMMdd"
                    ></el-date-picker>
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    :loading="searchLoading"
                    @click="handleSearch"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                >重 置</el-button>
            </el-form>

            <!-- 查询信息显示 -->
            <el-card shadow="never" class="countFormC">
                <div class="searchContent">
                    <div class="infoBox">
                        <el-form ref="countFormRef" :model="searchData" size="mini">
                            <el-row class="infoItem">
                                <el-col :span="8">
                                    <el-form-item label="设备卡号 : " label-width="150px">
                                        <el-input
                                            disabled
                                            v-model="searchData.DPANNO"
                                            style="width: 100%;"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="渠道支付类型 : " label-width="150px">
                                        <el-input
                                            disabled
                                            :value="searchData.CHNLPAYTYPE | getMethodTxt"
                                            style="width: 100%;"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="设备卡类型 : " label-width="150px">
                                        <el-input
                                            disabled
                                            :value="searchData.DPANTYPE === '1'? 'PBOC设备卡' : (searchData.DPANTYPE === '2'? 'MST设备卡' : searchData.DPANTYPE)"
                                            style="width: 100%;"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="4">设备卡号：</el-col>
                                <el-col :span="4">{{ searchData.DPANNO }}</el-col>-->
                                <!-- <el-col :span="4">渠道支付类型：</el-col>
                        <el-col :span="4">
                            {{ searchData.CHNLPAYTYPE | getMethodTxt }}
                                </el-col>-->
                                <!-- <el-col :span="4">设备卡类型：</el-col>
                        <el-col :span="4">
                            <span v-if="searchData.DPANTYPE === '1'">PBOC设备卡</span>
                            <span v-else-if="searchData.DPANTYPE === '2'">MST设备卡</span>
                                </el-col>-->
                            </el-row>
                            <el-row class="infoItem none_marg">
                                <el-col :span="8">
                                    <el-form-item label="设备卡号2 : " label-width="150px">
                                        <el-input
                                            disabled
                                            v-model="searchData.DPANNO2"
                                            style="width: 100%;"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="起始日期 : " label-width="150px">
                                        <el-input
                                            disabled
                                            :value="searchData.BEGDATE"
                                            style="width: 100%;"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="结束日期 : " label-width="150px">
                                        <el-input
                                            disabled
                                            :value="searchData.ENDDATE"
                                            style="width: 100%;"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>

                                <!-- <el-col :span="4">设备卡号2：</el-col>
                        <el-col :span="4">{{ searchData.DPANNO2 }}</el-col>
                        <el-col :span="4">起始日期：</el-col>
                        <el-col :span="4">{{ searchData.BEGDATE }}</el-col>
                        <el-col :span="4">结束日期：</el-col>
                                <el-col :span="4">{{ searchData.ENDDATE }}</el-col>-->
                            </el-row>
                        </el-form>
                    </div>
                </div>
            </el-card>
            <el-table :data="tableData" width="100%" border stripe class="heard-bg business_table">
                <el-table-column label="状态变更时间" prop="MODTIME"></el-table-column>
                <el-table-column label="状态变更流水号" prop="SEQNO"></el-table-column>
                <el-table-column label="操作类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.CLSFLAG === '1'">加载</span>
                        <span v-else-if="scope.row.CLSFLAG === '2'">激活</span>
                        <span v-else-if="scope.row.CLSFLAG === '3'">挂失</span>
                        <span v-else-if="scope.row.CLSFLAG === '4'">解挂</span>
                        <span v-else-if="scope.row.CLSFLAG === '5'">删除</span>
                        <span v-else-if="scope.row.CLSFLAG === '6'">注销</span>
                        <span v-else-if="scope.row.CLSFLAG === '7'">暂停</span>
                        <span v-else-if="scope.row.CLSFLAG === '8'">恢复</span>
                    </template>
                </el-table-column>
                <el-table-column label="变更前状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.BEFSTS === '1'">INITIAL（初始）</span>
                        <span v-else-if="scope.row.BEFSTS === '2'">LINKED（正常）</span>
                        <span v-else-if="scope.row.BEFSTS === '3'">SUSPENDED（锁定）</span>
                        <span v-else-if="scope.row.BEFSTS === '4'">UNLINKED（注销）</span>
                    </template>
                </el-table-column>
                <el-table-column label="并更后状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.AFTSTS === '1'">INITIAL（初始）</span>
                        <span v-else-if="scope.row.AFTSTS === '2'">LINKED（正常）</span>
                        <span v-else-if="scope.row.AFTSTS === '3'">SUSPENDED（锁定）</span>
                        <span v-else-if="scope.row.AFTSTS === '4'">UNLINKED（注销）</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作员号" prop="OPENO"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 16px;">
                <el-button
                    type="primary"
                    size="small"
                    @click="handleChangePage('pre')"
                    :disabled="currentApprefIndex <= 0"
                >上一页</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handleChangePage('next')"
                    :disabled="!nextButtonFlag"
                >下一页</el-button>
            </div>
        </template>
    </cardComponent>
</template>
<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { CHNLPAYTYPES } from '@/utils/Contants'

export default {
    name: 'cardStateChange',
    data() {
        return {
            title: 'accountBalance',
            searchLoading: false, // 确定按钮loading
            searchData: {},
            searchForm: {
                mainCardNo: '', // 主卡卡号
                startDate: '',
                endDate: '',
            },
            tableData: [],
            pagingDataList: [], // 翻页上送字段列表
            nextButtonFlag: false, // 下翻页按钮 显示控制阀
            currentApprefIndex: 0, // 当前页最后一条记录的申请编号的索引
        };
    },
    components: {
        cardComponent,
    },
    filters: {
        getMethodTxt(val) {
            if (val) {
                const txt = val.trim();
                let text = '';
                CHNLPAYTYPES.forEach((item) => {
                    if (item.value === txt) {
                        text = item.label;
                    }
                });
                return text;
            }
        },
    },
    mounted() {
        this.searchForm.mainCardNo = this.cardInfo_3004.CARDNO;
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 查询
        handleSearch() {
            this.currentApprefIndex = 0;
            this.searchLoading = true;
            let NEXTDAY = this.searchForm.startDate;
            let NEXTMPNO = 0;
            if (this.pagingDataList.length) { // 判断翻页上传字段取值
                NEXTDAY = this.pagingDataList[this.currentApprefIndex].NEXTDAY;
                NEXTMPNO = this.pagingDataList[this.currentApprefIndex].NEXTMPNO;
            }
            this.defaultParams.sysHead.busiName = '设备卡状态变更历史查询';
            const appBody = {
                DPANNO: this.searchForm.mainCardNo.trim() || '', // 卡号
                ISPEC: 'DPCHQ',
                ACTION: 'I',
                BEGDATE: this.searchForm.startDate, // 起始时间
                ENDDATE: this.searchForm.endDate, // 结束时间
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
            };
            this.defaultParams.body.appHead.source = 'CV';
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.TRXTYPE = '6644';
            defaultParams.body.appBody = appBody;
            this.$post.common.transPort(defaultParams).then((res) => {
                this.searchLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.searchData = result.body.appBody;
                        const currentPagingData = {
                            NEXTDAY: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].NEXTDAY,
                            NEXTMPNO: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].NEXTMPNO,
                        };
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 10);
                        let flag = false;
                        let currentIndex;
                        this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                            if (item.NEXTMPNO === currentPagingData.NEXTMPNO) {
                                flag = true;
                                currentIndex = index;
                            }
                        });
                        if (flag) { // 存在
                            this.currentApprefIndex = currentIndex;
                        } else {
                            this.pagingDataList.push(currentPagingData);
                            this.currentApprefIndex = this.pagingDataList.length - 1;
                        }
                    } else {
                        this.$message.error(result.sysHead.rspMsg);
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentApprefIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentApprefIndex = this.currentApprefIndex - 2;
                }
                this.handleSearch();
            } else { // 切换到下一页
                this.handleSearch();
            }
        },
        // 重置按钮点击事件处理
        handleReset() {
            this.$refs.searchForm.resetFields();
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.accountBalance {
    .countFormC {
        margin-bottom: 10px;
    }
    .none_marg {
        .el-form-item {
            margin-bottom: 0;
        }
    }
    // background-color: #fff;
    // border-radius: 8px;
    min-height: 100%;
    overflow: hidden;
    .searchContent {
        // margin-bottom: 16px;
        .el-form {
            width: 95%;
        }
        .infoItem {
            font-size: 16px;
            color: #999;
            text-align: left;
            // margin-bottom: 20px;

            .title {
                color: #000;
                text-align: right;
                padding-right: 20px;
            }
        }
    }
}
</style>
